<template>
  <div class="order-container" @click="handleInfo">
    <el-row class="order-top" type="flex" justify="space-between" align="middle">
      <span>订单编号： {{ course.code }}</span>
      <span>下单时间： {{ parseTime(course.createTime, '{y}.{m}.{d} {h}:{i}:{s}') }}</span>
    </el-row>
    <div class="order-body">
      <el-row class="body-name" type="flex" justify="space-between" align="middle">
        <span>{{ course.courseName }}  </span>
        <span style="color: #FF4C4C;">￥ {{ course.totalPrice }}</span>
      </el-row>
      <el-divider />
      <el-row type="flex" justify="end" align="middle" style="color: #999; ">
        合计: 1个课程，实付 <span class="count-price">￥{{ course.totalPrice }}</span>
      </el-row>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'

export default {
  name: 'OrderItem',
  props: {
    course: {
      required: true,
      type: Object
    }
  },
  methods: {
    parseTime,
    handleInfo() {
      this.$router.push('/order/info?code=' + this.course.code)
    }
  }
}
</script>

<style lang="scss" scoped>
.order-container {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #FFF;
  cursor: pointer;
}
.order-top{
  color: #999;
  margin-bottom: 20px;
}
.order-body {
  border: 1px solid #dbdbdb;
  border-radius: 5px;
  padding: 20px;
  .body-name {
    width: 100%;
    font-size: 18px;
  }
  .count-price {
    font-size: 18px;
    color:#000;
  }
}
</style>
